/**
* @description: 待办工单 ==> 待办工单（我待办的）==> 工单列表
**/
<template>
  <view class="todo-task-main">
    <nav-bar class="header" back :title="title" @goBack="goBack"/>
    <view class="main-container">
      <!--工单详情-->
      <plateTitle title="工单详情" class="plate-title-1"/>
      <view class="task-info-container">
        <van-cell-group>
          <van-cell v-for="(item, index) in taskInfoData" :title="item.title" :value="item.value" :key="index">
            <template #right-icon v-if="item.title === '巡视站点名称'">
<!--              <span class="operation"><img src="../../../../static/img/location.png" alt=""></span>-->
            </template>
          </van-cell>
        </van-cell-group>
      </view>

      <!--巡视内容-->
      <plateTitle title="巡视内容" class="plate-title-2"/>
      <view class="patrol-info-container">
        <view class="patrol-item" v-for="(item, index) in patrolList" :key="index">
          <view class="progesss-top">
            <view class="progess-left">
              <img src="../../../../static/img/equipment.png" alt="" v-if="item.DET_TYPE_NAME === '通信设备'">
              <img src="../../../../static/img/opticalCable.png" alt="" v-if="item.DET_TYPE_NAME === '通信光缆'">
              <img src="../../../../static/img/powerSupply.png" alt="" v-if="item.DET_TYPE_NAME === '通信电源'">
              <img src="../../../../static/img/lyq.png" alt="" v-if="item.DET_TYPE_NAME === '通信路由器'">
              <text class="progess-title">{{ item.DET_TYPE_NAME }}</text>
            </view>
            <view class="progess-right">
              {{item.JD}} ({{item.YWC }}/{{item.TOTAL}})
              <van-button v-if="item.TASK_STATE === '99'" type="info" class="patrol-btn" @click="toReceive(item)">查看</van-button>
              <van-button v-else type="info" class="patrol-btn" @click="toReceive(item)">巡视</van-button>
              <!--工单状态为已执行（TASK_STATE === '3'）且可以确认完工（ISWG === 1）时显示完工按钮-->
              <van-button v-if="item.ISWG === 1 && (item.TASK_STATE === '3' || item.TASK_STATE === '2')" type="info" class="patrol-btn" @click="updateTaskDetState(item)">完工</van-button>
            </view>
          </view>
          <hr class="progess-hr">
          <view class="progesss-bottom">
            <text class="progress-title">巡视人员：</text>
            <text class="progress-main">{{ item.XSRY }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import navBar from "../../../../components/common/nav-bar";
import plateTitle from "../../../../components/business/plateTitle";
import moment from "moment";
import {mapGetters} from "vuex";
import {Dialog} from "vant";

export default {
  name: "todoTask",
  components: { navBar, plateTitle },
  data() {
    return {
      taskInfoData: [],
      patrolList:[],
      title: '',
      taskId:'',
      taskType:'',
      taskSiteId:'', // 巡视进度跳转携带站点id
      taskSiteName: '' // 巡视进度跳转携带站点名称
    }
  },
  onLoad(e) {
    this.taskId = e.id
    this.taskType = e.state
    this.getTaskDetailsT()
  },
  computed: {
    ...mapGetters(['userData'])
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: `/pages/workBench/todoTask/todoTask`
      });
    },
    // 获取详情
    getTaskDetailsT() {
      let params = {
        task_id: this.taskId,
        task_state: this.taskType,
        userId: this.userData.userId
      }
      this.$api.getTaskDetails(params).then(res => {
        this.title = res.data.taskMsg.TASK_TYPE === '1' ? '计划工单' : '临时工单'
        this.taskSiteId = res.data.taskMsg.TASK_SITE_ID
        this.taskSiteName = res.data.taskMsg.TASK_SITE_NAME
        const JHXSKSSJ = res.data.taskMsg.JHXSKSSJ?moment(res.data.taskMsg.JHXSKSSJ).format('YYYY-MM-DD HH:mm'):''
        const JHXSJSSJ = res.data.taskMsg.JHXSJSSJ?moment(res.data.taskMsg.JHXSJSSJ).format('YYYY-MM-DD HH:mm'):''
        const JHXSSJ = JHXSKSSJ + '～' + JHXSJSSJ
        this.taskInfoData = [
          {
            title: "工单名称",
            value: res.data.taskMsg.NAME
          },
          {
            title: "巡视站点名称",
            value: res.data.taskMsg.TASK_SITE_NAME
          },
          {
            title: "计划巡视时间",
            value: JHXSSJ
          },
          {
            title: "巡视负责人",
            value: res.data.taskMsg.XSFZR
          },
          {
            title: "备注",
            value: res.data.taskMsg.REMARK
          },
        ]
        this.patrolList = res.data.task_details
      })
    },

    toReceive(item) {
      // 判断item 中的title
      console.log(item)
      switch(item.DET_TYPE_NAME) {
        case '通信设备': {
          uni.navigateTo({
            url: `/pages/workBench/todoTask/equipmentTour/equipmentTour?taskId=${this.taskId}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}&state=${item.TASK_STATE}`
          })
          break;
        }
        case '通信光缆': {
          uni.navigateTo({
            url: `/pages/workBench/todoTask/cableTour/cableTour?taskId=${this.taskId}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}&state=${item.TASK_STATE}`
          })
          break;
        }
        case '通信电源': {
          uni.navigateTo({
            url: `/pages/workBench/todoTask/powerTour/powerTour?taskId=${this.taskId}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}&state=${item.TASK_STATE}`
          })
          break;
        }
        case '通信路由器': {
          uni.navigateTo({
            url: `/pages/workBench/todoTask/routerPatrol/routerPatrol?taskId=${this.taskId}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}&state=${item.TASK_STATE}`
          })
        }
      }
    },

    // 完工
    updateTaskDetState(item) {
      console.log(item);
      let params = {
        "taskId": this.taskId,                                    // 主工单ID
        "tourTim": moment().format("YYYY-MM-DD HH:mm:ss"),  // 当前时间
        "detType": item.DET_TYPE,                                  // 设备类型（1.通信设备，2.通信光缆，3.通信电源, 4.通信路由器）
        "tourOperId": this.userData.userId,
        "tourOperName": this.userData.userName,
      };
      Dialog.confirm({
        title: "是否确认完工？",
      }).then(() => {
        this.$api.todoTaskApi.updateTaskDetState(params).then(res => {
          if(res.code === 0) {
            this.getTaskDetailsT();
          } else {
            Dialog.alert({
              message: '操作失败',
              theme: 'round-button',
            })
          }
        });
      })
    }
  }
};
</script>

<style scoped lang="scss">
.todo-task-main {
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  .main-container {
    min-height: calc(100vh - #{px2vh(283)});
    padding: px2vh(30) px2vw(30) px2vh(90) px2vw(30);
    background-color: #F8F8F8;

    /deep/.van-field__label,
    /deep/.van-field__control,
    /deep/.van-field__control:read-only {
      font-size: px2vw(42);
    }
    .plate-title-1 {
      margin-top: px2vh(30);
      margin-bottom: px2vh(27);
    }
    .task-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;

      .operation {
        margin-left: px2vw(30);
        img {
          width: px2vw(28);
          height: px2vh(41);
          vertical-align: middle;
        }
      }
    }
    .plate-title-2 {
      margin-top: px2vh(60);
      margin-bottom: px2vh(27);
    }
    .patrol-info-container .patrol-item {
      width: px2vw(1020);
      //height: px2vh(313);
      background: #fff;
      border-radius: $border-radius-base;
      overflow: hidden;
      margin-bottom: px2vh(30);
      padding-bottom: px2vh(30);
      .progesss-top {
        //width: px2vw(920);
        height: px2vh(172);
        margin: 0 px2vw(50);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .progess-left {
          display: flex;
          align-items: center;

          img {
            width: px2vw(68);
            height: px2vw(68);
            //margin-top: px2vh(55);
            //float:left;
          }

          .progess-title {
            color: #666;
            //float: left;
            font-size: px2vw(42);
            margin-left: px2vw(20);
            //margin-top: px2vh(58);
            //line-height: px2vh(62);
          }
        }
        .progess-right {
          //width: px2vw(258);
          font-size: px2vw(42);
          //line-height: px2vh(62);
          //margin-top: px2vh(55);
          //float: right;
          display: flex;
          align-items: center;
          .patrol-btn {
            margin-left: px2vw(30);
            padding: 0 6px;
            width: px2vw(160);
            height: px2vh(68);
            background: #417ADC;
            //float: right;
            border-radius: px2vw(40) px2vh(40);
          }
          .patrol-btn:not(:first-child) {
            margin-left: px2vw(10);
          }
        }
        .processColor {
          color: #FF4355;
        }
        .processColor2 {
          color: #FFAD0E;
        }
      }
      .progess-hr {
        width: px2vw(920);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
      }
      .progesss-bottom {
        width: px2vw(920);
        margin-left: px2vw(50);
        //height: px2vh(138);
        font-size: px2vw(36);
        display: flex;
        padding: px2vh(30) 0 0;
        .progress-title {
          width: px2vw(190);
          display: inline-block;
          //margin-top: px2vh(58);
          color: #666;
        }
        .progress-main {
          flex: 1;
          display: inline-block;
          //margin-top: px2vh(58);
          color: #333;
        }
      }
    }
  }
}
</style>
